<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黄河流域城市群经济发展时空格局分析</title>
    <!-- css样式表 -->
    <!-- <link rel="stylesheet" href="js/bs/css/bootstrap.css"> -->
    <link rel="stylesheet" href="../public/js/bs/css/bootstrap.css">
    <!-- js脚本 -->
    <!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
    <script type="text/javascript" src="../public/js/jquery.min.js"></script>
    <!-- <script src="js/bs/js/bootstrap.js"></script> -->
    <script src="../public/js/bs/js/bootstrap.js"></script>
    <!-- <script type="text/javascript" include="echarts,leaflet-icon-pulse" src="dist/leaflet/include-leaflet.js"></script> -->
    <script type="text/javascript" include="echarts,leaflet-icon-pulse" src="../dist/leaflet/include-leaflet.js"></script>

    <style>
        #divBody {
            height: 100%;
            width: 100%;
            margin-top: 5px;
            /* padding-left: 5px;
      padding-right: 5px; */
        }
        
        #anniu button {
            width: 100px;
            height: 40px;
            z-index: 200000;
        }
        
        #searchInput {
            display: none;
            position: absolute;
            width: 200px;
            margin-left: 82%;
            margin-top: 4px;
            z-index: 200000;
        }
        
        #timeSelect {
            /* background-color: burlywood; */
            position: absolute;
            top: 7%;
            width: 200px;
            text-align: left;
            margin-top: 4px;
            padding: 15px;
            font-size: 14px;
            z-index: 200000;
        }
        
        #timeSelect #yearSelect {
            display: none;
        }
        
        .r-list {
            box-shadow: 2px 3px 5px 0px rgba(51, 51, 51, 0.18);
            border-radius: 5px;
            width: 45px;
            margin-left: 55px;
        }
        
        .r-item {
            background-image: url('../public/img/全图.png');
            background-repeat: no-repeat;
            background-position: center;
            border-style: none;
            outline: none;
        }
        
        .r-item2 {
            background-image: url('../public/img/切换区域.png');
        }
        
        .r-item3 {
            background-image: url('../public/img/搜索.png');
        }
        
        .r-item4 {
            background-image: url('../public/img/刷新图层.png');
        }
        /* #rightChart,#leftChart::-webkit-scrollbar{
      border: 0px;
    } */
    </style>
</head>

<body onload="initMap()">
    <div class="container" id="divBody">
        <!-- 导航部分---begin -->
        <div class="nav row">
            <ul id="myTab" class="nav nav-tabs">
                <nav class="navbar navbar-inverse" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header" id="navPart">
                            <a class="navbar-brand" href="#">
                                <span class="glyphicon glyphicon-education"></span> 黄河流域城市群经济发展时空格局分析
                            </a>
                        </div>
                        <div>
                            <ul class="nav navbar-nav">
                                <li class="active dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">基础指标
                    <span class="caret"></span>
                  </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#population" data-toggle="tab" onclick="getPopulationInfo()">常住人口</a></li>
                                        <script>
                                            function getPopulationInfo() {
                                                //获取年份选择控件中的值
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/population.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: "SELECT cityName,totalPopulation FROM year_" + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        let resultJsonArr = bubbleJson(result, "totalPopulation");
                                                        //遍历JSON数组，获取城市名和人口
                                                        let cityNameArr = new Array(),
                                                            populationArr = new Array();
                                                        for (var i = 0; i < resultJsonArr.length; i++) {
                                                            cityNameArr.push(resultJsonArr[i].cityName);
                                                            populationArr.push(resultJsonArr[i].totalPopulation);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "常住人口数", cityNameArr, populationArr, "万人");
                                                    }
                                                });
                                            }
                                        </script>
                                        <li class="divider"></li>
                                        <li><a href="#perGDP" tabindex="-1" data-toggle="tab" onclick="getTotalGDP()">GDP总值</a></li>
                                        <script>
                                            function getTotalGDP() {
                                                //获取年份选择控件中的值
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/totalGDP.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: "SELECT cityName,perGDP,totalPopulation FROM year_" + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        let resObj = new Array();
                                                        for (var i = 0; i < result.length; i++) {
                                                            resObj.push({
                                                                'cityName': result[i].cityName,
                                                                'totalGDP': result[i].perGDP * result[i].totalPopulation
                                                            });
                                                        }
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(resObj, "totalGDP");
                                                        // //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            totalGDPArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            totalGDPArr.push(sortedResObj[i].totalGDP);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "总GDP/亿元", cityNameArr, totalGDPArr, "亿元");
                                                    }
                                                });
                                            }
                                        </script>

                                        <li class="divider"></li>
                                        <li><a href="#CZint" tabindex="-1" data-toggle="tab" onclick="getFinanceIncome()">地方财政收入</a></li>
                                        <script>
                                            function getFinanceIncome() {
                                                //获取年份选择控件中的值
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/financeIncomeAndOutCome.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: "SELECT cityName,perFinanceIncom,perFinanceOutcome,totalPopulation FROM year_" + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        let resObj = new Array();
                                                        for (var i = 0; i < result.length; i++) {
                                                            resObj.push({
                                                                'cityName': result[i].cityName,
                                                                'financeVal': result[i].perFinanceIncom * result[i].totalPopulation / 100
                                                            });
                                                        }
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(resObj, "financeVal");
                                                        // //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            financeArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            financeArr.push(sortedResObj[i].financeVal);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "总财政收入/亿元", cityNameArr, financeArr, "亿元");
                                                    }
                                                });
                                            }
                                        </script>

                                        <li><a href="#CZout" tabindex="-1" data-toggle="tab" onclick="getFinanceOutcome()">地方财政支出</a></li>
                                        <script>
                                            function getFinanceOutcome() {
                                                //获取年份选择控件中的值
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/financeIncomeAndOutCome.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: "SELECT cityName,perFinanceIncom,perFinanceOutcome,totalPopulation FROM year_" + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        let resObj = new Array();
                                                        for (var i = 0; i < result.length; i++) {
                                                            resObj.push({
                                                                'cityName': result[i].cityName,
                                                                'financeVal': result[i].perFinanceOutcome * result[i].totalPopulation / 100
                                                            });
                                                        }
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(resObj, "financeVal");
                                                        // //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            financeArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            financeArr.push(sortedResObj[i].financeVal);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "总财政支出/亿元", cityNameArr, financeArr, "亿元");
                                                    }
                                                });
                                            }
                                        </script>

                                        <li><a href="#Educated" tabindex="-1" data-toggle="tab" onclick="getPerEduOutCome()">教育事业支出</a></li>
                                        <script>
                                            function getPerEduOutCome() {
                                                //获取年份选择控件中的值
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/perEduOutCome.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: "SELECT cityName,perEduOutcome FROM year_" + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(result, "perEduOutcome");
                                                        //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            perEduOutcomeArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            perEduOutcomeArr.push(sortedResObj[i].perEduOutcome);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "人均教育支出/百元", cityNameArr, perEduOutcomeArr, "百元");
                                                    }
                                                });
                                            }
                                        </script>

                                        <li><a href="#Science" tabindex="-1" data-toggle="tab" onclick="getPerScienceOutCome()">科学事业支出</a>
                                        </li>
                                        <script>
                                            function getPerScienceOutCome() {
                                                //获取年份选择控件中的值
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/PerScienceOutCome.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: "SELECT cityName,perScienceOutcome FROM year_" + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        //perScienceOutcome
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(result, "perScienceOutcome");
                                                        //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            perScienceOutcomeArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            perScienceOutcomeArr.push(sortedResObj[i].perScienceOutcome);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "人均科研支出/百元", cityNameArr, perScienceOutcomeArr, "百元");
                                                    }
                                                });
                                            }
                                        </script>

                                        <li><a href="#Save" tabindex="-1" data-toggle="tab" onclick="getperSaveMoney()">城乡储蓄年末余额</a></li>
                                        <script>
                                            function getperSaveMoney() {
                                                //获取年份选择控件中的值
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/perSaveMoney.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: "SELECT cityName,perSaveMoney FROM year_" + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        //perScienceOutcome
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(result, 'perSaveMoney');
                                                        //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            perSaveMoneyArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            perSaveMoneyArr.push(sortedResObj[i].perSaveMoney);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "人均城乡储蓄/万元", cityNameArr, perSaveMoneyArr, "万元");
                                                    }
                                                });

                                            }
                                        </script>

                                        <li class="divider"></li>
                                        <li><a href="#Second" tabindex="-1" data-toggle="tab" onclick="getSecondaryRate()">第二产业比重</a></li>
                                        <script>
                                            function getSecondaryRate() {
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/SecondaryRate.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: 'SELECT cityName,percentSecond FROM year_' + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        // console.log(result)
                                                        //perScienceOutcome
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(result, "percentSecond");
                                                        //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            perSaveMoneyArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            perSaveMoneyArr.push(sortedResObj[i].percentSecond);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "第二产业占比", cityNameArr, perSaveMoneyArr, "%");
                                                    }
                                                });
                                            }
                                        </script>


                                        <li><a href="#Third" tabindex="-1" data-toggle="tab" onclick="getThird()">第三产业比重</a></li>
                                        <script>
                                            function getThird() {
                                                //percentThird
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/thirdRate.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: 'SELECT cityName,percentThird FROM year_' + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        //percentThird
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(result, "percentThird");
                                                        //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            perSaveMoneyArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            perSaveMoneyArr.push(sortedResObj[i].percentThird);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "第三产业占比", cityNameArr, perSaveMoneyArr, "%");
                                                    }
                                                });
                                            }
                                        </script>

                                        <li><a href="#Commercial" tabindex="-1" data-toggle="tab" onclick="getForeignRate()">外商投资比重</a></li>
                                        <script>
                                            function getForeignRate() {
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/ForeignRate.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: 'SELECT cityName,perForeignCost FROM year_' + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        //perForeignCost
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(result, "perForeignCost");
                                                        //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            perSaveMoneyArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            perSaveMoneyArr.push(sortedResObj[i].perForeignCost);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "外商投资/总GDP", cityNameArr, perSaveMoneyArr, "%");
                                                    }
                                                });
                                            }
                                        </script>

                                        <li class="divider"></li>
                                        <li><a href="#Hospital" tabindex="-1" data-toggle="tab" onclick="getMedicalSource()">医疗资源</a></li>
                                        <script>
                                            function getMedicalSource() {
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/MedicalSource.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: 'SELECT cityName,perMedicalSource FROM year_' + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        //perForeignCost
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(result, "perMedicalSource");
                                                        //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            perSaveMoneyArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            perSaveMoneyArr.push(sortedResObj[i].perMedicalSource);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "人均医疗资源/个", cityNameArr, perSaveMoneyArr, "个");
                                                    }
                                                });
                                            }
                                        </script>

                                        <li><a href="#Internet" tabindex="-1" data-toggle="tab" onclick="getInternetAmout()">互联网用户数</a></li>
                                        <script>
                                            function getInternetAmout() {
                                                var year = $("#yearSelect").find("option:selected").text();
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/InternetAmout.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: 'SELECT cityName,perInternetNum FROM year_' + year.toString()
                                                    },
                                                    success: function(result, status, xhr) {
                                                        //perForeignCost
                                                        //冒泡排序
                                                        let sortedResObj = bubbleJson(result, "perInternetNum");
                                                        //遍历JSON数组，获取城市名和总GDP
                                                        let cityNameArr = new Array(),
                                                            perSaveMoneyArr = new Array();
                                                        for (var i = 0; i < sortedResObj.length; i++) {
                                                            cityNameArr.push(sortedResObj[i].cityName);
                                                            perSaveMoneyArr.push(sortedResObj[i].perInternetNum);
                                                        }
                                                        //将参数传递给左边的图表
                                                        initLeftChart(year, "互联网用户数/万人", cityNameArr, perSaveMoneyArr, "个");
                                                    }
                                                });
                                            }
                                        </script>

                                    </ul>
                                </li>

                                <li class="active dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">综合指标
                    <span class="caret"></span>
                  </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#balance" data-toggle="tab" onclick="getBalance()">综合水平</a></li>
                                        <script>
                                            function getBalance() {
                                                //获取当前选中的年份
                                                var year = $("#yearSelect").find("option:selected").text();
                                                //获取城市信息
                                                let queryRes_2 = getCityQeueuInfo(year).responseJSON;
                                                //将城市群进行分类处理
                                                let classRes = classCityQeueu(queryRes_2);
                                                //构造数据集
                                                let cQeueuSet = constructCitySet(classRes.CQeueu, year),
                                                    sdQeueuSet = constructCitySet(classRes.SDQeueu, year);
                                                //将参数传递给图表
                                                initRightChart_CompScore(cQeueuSet, sdQeueuSet, year.toString());
                                            }
                                        </script>

                                        <li><a href="#industryPercent" data-toggle="tab" onclick="getIndustryPercent()">产业占比</a></li>
                                        <script>
                                            function getIndustryPercent() {
                                                //获取当前选中的年份
                                                var year = $("#yearSelect").find("option:selected").text();
                                                //异步请求并更新数据
                                                $.ajax({
                                                    async: true, //发起异步请求
                                                    url: "/index/IndustryPercent.json",
                                                    type: "GET",
                                                    data: {
                                                        key: "key",
                                                        value: year,
                                                        sqlQuery: "SELECT citybasicinfo.cityName,citybasicinfo.cityQeueu,percentSecond,percentThird,(100-percentThird-percentThird) AS 'percentFirst' FROM year_" + year.toString() + ",citybasicinfo WHERE citybasicinfo.cityName=year_" + year.toString() + ".cityName"
                                                    },
                                                    success: function(result, status, xhr) {
                                                        //分别获取隶属中原城市群和山东城市群的城市
                                                        let classRes = classCityQeueu(result);
                                                        //统计两个城市群的产业占比平均值
                                                        let cQeueuAvgObj = getAverageVal(classRes.CQeueu);
                                                        let sdQeueuAvgObj = getAverageVal(classRes.SDQeueu);
                                                        console.log(cQeueuAvgObj);
                                                        console.log(sdQeueuAvgObj);
                                                        let legendObj = {
                                                            // top: 10,
                                                            data: ['中原城市群', '山东半岛城市群'],
                                                            textStyle: {
                                                                color: '#fff',
                                                                fontSize: 16
                                                            }
                                                        }
                                                        initRightChart(cQeueuAvgObj, sdQeueuAvgObj, "一/二/三产业占比分布", legendObj);
                                                    }
                                                });
                                            }

                                            //将查询结果进行分类-中原城市群和山东半岛城市群
                                            function classCityQeueu(result) {
                                                let cQeueu = [],
                                                    sdQeueu = [];
                                                for (var i = 0; i < result.length; i++) {
                                                    if (result[i].cityQeueu == "中原城市群")
                                                        cQeueu.push(result[i]);
                                                    else
                                                        sdQeueu.push(result[i]);
                                                }
                                                return {
                                                    "CQeueu": cQeueu,
                                                    "SDQeueu": sdQeueu
                                                };
                                            }

                                            //统计城市群中的第一/二/三产业的平均占比
                                            function getAverageVal(qeueuArr) {
                                                let totalFirst = 0,
                                                    totalSecond = 0,
                                                    totalThird = 0;
                                                //遍历对象数组
                                                for (var i = 0; i < qeueuArr.length; i++) {
                                                    totalFirst += qeueuArr[i].percentFirst;
                                                    totalSecond += qeueuArr[i].percentSecond,
                                                        totalThird += qeueuArr[i].percentThird;
                                                }
                                                return [{
                                                    'value': totalFirst / qeueuArr.length,
                                                    'name': "第一产业"
                                                }, {
                                                    'value': totalSecond / qeueuArr.length,
                                                    'name': "第二产业"
                                                }, {
                                                    'value': totalThird / qeueuArr.length,
                                                    'name': "第三产业"
                                                }];
                                            }
                                        </script>

                                    </ul>
                                </li>

                                <li><a href="#Factor" onclick="getComScore()">因子分析</a></li>

                                <li><a href="/thematicPage">专题信息</a></li>
                                <li>
                                    <a href="#" title="退出系统">
                                        <span class="glyphicon glyphicon-log-out" aria-hidden="true" onclick="exitCurPage()"></span>
                                        <script>
                                            function exitCurPage() {
                                                //退出当前页面
                                                location.href = "/welcome";
                                            }
                                        </script>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </ul>
        </div>
        <!-- 导航部分---end -->

        <!-- 主体部分---begin -->
        <div class="row">
            <!-- 坐标图表部分---begin -->
            <div class="col-md-2">
                <div id="leftChart" style="width: 100%;height:850%;">
                </div>
            </div>
            <!-- 坐标图表部分---end -->

            <!-- 中间地图部分---begin -->
            <div class="col-md-7">
                <div id="map" style="position: absolute;left: 0px;width: 100%;height: 843px;background-color: lavender;text-align: right;">

                    <div class="time" id="timeSelect">
                        <span id="swictSpan" class="glyphicon glyphicon-th-list" title="切换时间维度" onmouseover="showYearSelect()" onmouseout="hideYearSelect()"></span>
                        <select class="year" style="width: 55px;height: 30px;" id="yearSelect" onchange="chageYear()">
              <option value="2018">2018</option>
              <option value="2017">2017</option>
              <option value="2016">2016</option>
              <option value="2015">2015</option>
              <option value="2014">2014</option>
              <option value="2013">2013</option>
              <option value="2012">2012</option>
              <option value="2011">2011</option>
              <option value="2010">2010</option>
              <option value="2009">2009</option>
              <option value="2008">2008</option>
              <option value="2007">2007</option>
            </select>
                    </div>

                    <div class="input-group" id="searchInput">
                        <span class="input-group-btn">
              <button class="btn btn-default" type="button" onclick="searchCity()">Go!</button>
            </span>
                        <input type="text" class="form-control" id="inputText" placeholder="Search for...">
                    </div>
                    <div class="btn-group-vertical r-list" role="group" id="anniu">
                        <button type="button" class="btn btn-default r-item r-item3" onmouseover="showSearchInput()" onmouseout="hideSearchInput()" onclick="noViewSearchInput()" data-toggle="tooltip" data-placement="left" title="搜索城市">
              <button type="button" class="btn btn-default r-item r-item2" onclick="changeArea()" data-toggle="tooltip"
                data-placement="left" title="中心定位"></button>
                        </button>
                        <button type="button" class="btn btn-default r-item" onclick="fullExtent()" data-toggle="tooltip" data-placement="left" title="全幅显示"></button>
                        <button type="button" class="btn btn-default r-item r-item4" onclick="refreshMap()" data-toggle="tooltip" data-placement="left" title="刷新图层"></button>
                    </div>
                </div>
            </div>
            <!-- 中间地图部分---end -->

            <!-- 坐标图表部分---begin -->
            <div class="col-md-3">
                <div id="rightChart" style="width:100%;height:850%;"></div>
            </div>
            <!-- 左边图表部分---end -->
        </div>
        <!-- 主体部分---end -->
    </div>

    <!-- 引入自定义JS文件 -->
    <!-- 加载echarts图表 -->
    <script type="text/javascript" src="../public/js/loadCharts.js"></script>
    <!-- 数值处理js文件 -->
    <script src="../public/js/numericCompute.js"></script>
    <!-- <script src="js/index.js"></script> -->
    <script src="../public/js/index.js"></script>

</body>

</html>